<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
</head>
<script>

    /*初始方法*/
    $(function() {
        // 加结果集式样
        addTitleCss();
        var params = $("#inputForm").serialize();
        // 下拉选框带搜索功能
        $("#styleCategoryCD,#styleFitCd").select2(); 
    })

    /*加结果集式样*/
    function addTitleCss() {
        // 结果集个数
        var resultNumber = $("input[name='styleCategoryCd']").length;

        // 如果结果集个数大于零
        if (resultNumber > 0) {
            var theadW = $('.tabScroll thead').width()
            var theadTh = $('.tabScroll thead tr th').length
            $('.tabScroll thead tr th').width(theadW / theadTh)
            $('.tabScroll tbody tr:first-child td')
                    .each(
                            function() {
                                var indexNum = $(this).index()
                                var tdWidth = $(
                                        '.tabScroll tbody tr:first-child td')
                                        .eq(indexNum).css('width')
                                $('.tabScroll thead tr th').eq(indexNum).width(
                                        tdWidth);
                            })
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
        }else if(resultNumber == 0 ){
        	var theadW = $('.tabScroll thead').width()
            var theadTh = $('.tabScroll thead tr th').length
            $('.tabScroll thead tr th').width(theadW/theadTh)
        }
    }

    /*搜索*/
    function searchItem() {

        var params = $("#inputForm").serialize();

        $.post("${ctx}/order/createOrder/myStyleList", params,
                function(result) {
                    // 显示结果集
                    var h = $(callBackHtml(result)).find("#infoList").html();
                    $('#infoList').html(h);

                    var theadW = $('.tabScroll thead').width()
                    var theadTh = $('.tabScroll thead tr th').length
                    $('.tabScroll thead tr th').width(theadW / theadTh)
                    $('.tabScroll tbody tr:first-child td').each(
                            function() {
                                var indexNum = $(this).index()
                                var tdWidth = $(
                                        '.tabScroll tbody tr:first-child td')
                                        .eq(indexNum).css('width')
                                $('.tabScroll thead tr th').eq(indexNum).width(
                                        tdWidth);
                            })

                    $('tbody tr').on('click', function() {

                        $(this).addClass('active')
                        $(this).siblings().removeClass('active')
                    })
                    // 加结果集式样
                    addTitleCss();
                }, 'html');
    }
    
    /*选择*/
    function chooseItem() {

        var items = $(".active");
        if (items.length == 0) {
            // 请选择项目！
            layer.msg('<spring:message code="order_please_choose_item"/>', {time:1000}); 
            return;
        }
        
        // 向父页面加载值
        window.parent.frames[0].setParamByStyleChoose(items);
        // 关闭当前页面
        closeWin();

    }

</script>
<body>
    <!--头部-->
    <div class="myshop clearfix">
        <!-- 选择款式 -->
        <p class="myshoptop fl"><spring:message code="order_choose_style"/></p>
        <div class="fr">
            <div class="topBtnClose" onclick="closeWin()">
                <img src="${ctxStatic}/images/btn-close.png">
            </div>
        </div>
    </div>
    <div class="middle myshop_middleSm">
        <form id="inputForm">

            <div class="clearfix">
                <div class="searchLeft clearfix">
                    <div class="searchSm clearfix">
                    <!-- 款式名称 -->
                        <p class="searchTxt"><spring:message code="order_style_name"/></p>
                        <div class="searchInp">
                            <input type="text" name="styleNameCn" id="styleNameCn">
                        </div>
                    </div>
                    <div class="searchSm clearfix">
                        <!-- 款式类别 -->
                        <p class="searchTxt"><spring:message code="order_style_category"/></p>
                        <div class="searchInp">
                            <c:set value="<%=ResourcesUtil.getConfig(\"style_category\")%>"
                                var="categoryList" />
                            <select class="form-control sex" style="width:100px" name="styleCategoryCD" id="styleCategoryCD">
                                <option value=""><spring:message code="order_please_choose"/></option>
                                <c:forEach items="${fns:getDictList(categoryList)}"
                                    var="categoryItem">
                                    <option value="${categoryItem.itemCode}-${categoryItem.itemValue}">${categoryItem.itemName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="searchSm clearfix">
                        <!-- 版型 -->
                        <p class="searchTxt"><spring:message code="order_model"/></p>
                        <div class="searchInp">
                            <c:set value="<%=ResourcesUtil.getConfig(\"fit_body_type\")%>" var="fitBodyTypeList" />
                            <select class="form-control sex" style="width:100px" name="styleFitCd" id="styleFitCd">
                                <option value=""><spring:message code="order_please_choose"/></option>
                                <c:forEach items="${fns:getDictList(fitBodyTypeList)}" var="fitBodyTypeItem">
                                    <option value="${fitBodyTypeItem.itemCode}-${fitBodyTypeItem.itemValue}">${fitBodyTypeItem.itemName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="searchSm clearfix">
                        <!-- 季节年份 -->
                        <p class="searchTxt"><spring:message code="order_season_year"/></p>
                        <div class="searchInp">
                            <input type="text" name="sytleYear" id="sytleYear" maxlength="4">
                        </div>
                    </div>
                </div>
                <div class="searchRight">
                    <!-- 选择 -->
                    <button type="button" class="btn-cj" onclick="chooseItem()"><spring:message code="order_choose"/></button>
                    <!-- 重置 -->
                    <button type="button" class="btn-js"><spring:message code="common_reset"/></button>
                    <!-- 检索 -->
                    <button type="button" class="btn-js" onclick="searchItem()"><spring:message code="commom_check"/></button>
                </div>
            </div>
        </form>

        <div class="clearfix">
            <!-- 项目列表 -->
            <p class="data_id"><spring:message code="order_item_list"/></p>
        </div>
        <div class="tableBox tableList" id="infoList">
            <div class="tableSm tablePic">
                <div class="tabScroll" style="height: 400px;">
                    <table>
                        <thead>
                            <tr>
                                <!-- No. -->
                                <th><spring:message code="order_No"/></th>
                                <!-- 款式图片 -->
                                <th><spring:message code="order_style_pic"/></th>
                                <!-- 款式名称 -->
                                <th><spring:message code="order_style_name"/></th>
                                <!-- 款式类别 -->
                                <th><spring:message code="order_style_category"/></th>
                                <!-- 版型 -->
                                <th><spring:message code="order_model"/></th>
                                <!-- 季节年份 -->
                                <th><spring:message code="order_season_year"/></th>
                                <!-- 款号 -->
                                <th><spring:message code="order_styleNo"/></th>
                                <!-- 面料 -->
                                <th><spring:message code="order_material"/></th>
                                <!-- 创建者 -->
                                <th><spring:message code="order_createUser"/></th>
                                <!-- 创建日期 -->
                                <th><spring:message code="order_createDate"/></th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${mystyleList}" var="style" varStatus="status">
                                <tr>
                                    <!-- NO -->
                                    <td>
                                        <p>${status.index+1}</p>
                                    </td>
                                    <!-- 款式图片 -->
                                    <td><img src="${style.uploadFile}" class="imgSize tableImg">
                                    </td>
                                    <!-- 款式名称 -->
                                    <td>
                                        <%-- <p class="show" onclick="popup('935px','550px','${ctx}/style/mystyle/show?id=${style.id}')">${style.styleNameCn}</p> --%>
                                        <p >${style.styleNameCn}</p>
                                        <!-- 款式名称 -->
                                        <input name="styleName" type="hidden" value="${style.styleNameCn}">
                                        <!-- 款式ID -->
                                        <input name="styleId" type="hidden" value="${style.id}">
                                        <!-- 制作方式 -->
                                        <input name="styleMakeType" type="hidden" value="${style.styleMakeType}">
                                        <!-- 尺码组 -->
                                        <input name="styleSizeGroupCd" type="hidden" value="${style.styleSizeGroupCd}">
                                        <!-- 尺码 -->
                                        <input name="styleSizeCd" type="hidden" value="${style.styleSizeCd}">
                                    </td>
                                    <!-- 款式类别 -->
                                    <td>
                                        <p>${fns:getDictName(style.styleCategoryCd)}<input name="styleCategoryCd" type="hidden" value="${style.styleCategoryCd}"/></p>
                                    </td>
                                    <!-- 版型 -->
                                    <td>
                                        <p>${fns:getDictName(style.styleFitBodyType)}<input name="fitCD" type="hidden" value="${style.styleFitBodyType}"/></p>
                                    </td>
                                    <!-- 年+季节 -->
                                    <td>
                                        <p>${style.sytleYear}${fns:getDictName(style.sytleSeason)}<input type="hidden" name="styleYear" value="${style.sytleYear}" /> <input type="hidden" name="styleSeason" value="${style.sytleSeason}" /> </p>
                                    </td>
                                    <!-- 款号 -->
                                    <td>
                                        <p>${style.styleCd}</p>
                                    </td>
                                    <!-- 面料 -->
                                    <td>
                                        <p data-toggle="tooltip" title="${style.materialCode}${style.material.materialNameCn}">${style.materialCode}${style.material.materialNameCn}<input name="fabricId" type="hidden" value="${style.material.id}"></p>
                                    </td>
                                    <!-- 创建者 -->
                                    <td>
                                        <p>${style.firstName}${style.lastName}</p>
                                    </td>
                                    <!-- 创建日期 -->
                                    <td>
                                        <p>
                                            <fmt:formatDate value="${style.createDate}" pattern="yyyy-MM-dd HH:mm" />
                                        </p>
                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                    <c:if test="${empty mystyleList}" >
                    <div class="tableNone">
                       <img src="${ctxStatic}/images/icon-03.png" height="20"> <spring:message code="There_is_no_data"/>
                    </div>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 由于样式问题，javascript放在上面写，css效果显示不出
        var windowH = window.innerHeight
                || document.documentElement.clientHeight
                || document.body.clientHeight
        $('.middle').css('height', windowH - 40);

        $('tbody tr').on('click', function() {

            $(this).addClass('active')
            $(this).siblings().removeClass('active')
        })
    </script>
</body>
</html>